<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/jquery-2.2.3.min.js}" charset="utf-8"></script>
    <link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>

    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>


<body>
<form class="layui-form" id="adminproject" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username"  placeholder="请输入用户名" autocomplete="on"
                   class="layui-input" id="username">
        </div>
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password"   placeholder="请输入密码" autocomplete="on"
                   class="layui-input" id="password">
        </div>
        <label class="layui-form-label">权限</label>
        <div class="layui-input-block">
            <div id="test12" class="demo-tree-more"></div>
        </div>

        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-demo="getChecked">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<form class="layui-form" id="adminproject2" style="display:none">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" placeholder="请输入用户名" autocomplete="on"
                   class="layui-input" id="username2">
        </div>
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password"  placeholder="请输入密码" autocomplete="on"
                   class="layui-input" id="password2">
        </div>
    </div>

    <div style="display: none">
        <input type="number" name="id" id="id">
    </div>

</form>


<table class="layui-hide" id="test" lay-filter="test"></table>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" lay-event="add2">新增用户名</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>






<script>
    //权限


            layui.use(['tree', 'util'], function () {
                var tree = layui.tree
                    , layer = layui.layer
                    , util = layui.util
                    //模拟数据
                    , data = [

                        {
                            title: '权限'
                            , id: 113
                            // , field: 'name2'
                            , checked: false
                            , spread: false
                            , children: [
                                {
                                    title: '审核权限'
                                    , id: 114
                                    , field: '审核权限'
                                    , checked: false
                                    , spread: false

                                },
                                {
                                    title: '完工权限'
                                    , id: 115
                                    , field: '完工权限'
                                    , checked: false
                                    , spread: false

                                },
                                {
                                    title: '知识库管理'
                                    , id: 116
                                    , field: '知识库管理'
                                    , checked: false
                                    , spread: false
                                },
                                {
                                    title: '用户管理'
                                    , id: 117
                                    , field: '用户管理'
                                    , checked: false
                                    , spread: false
                                },

                            ]
                        },

                    ]

                //基本演示
                tree.render({
                    elem: '#test12'
                    , data: data
                    , showCheckbox: true  //是否显示复选框
                    , id: 'demoId1'
                    , isJump: true //是否允许点击节点时弹出新窗口跳转
                    , click: function (obj) {
                        var data = obj.data;  //获取当前点击的节点数据
                        // layer.msg(JSON.stringify(data))
                    }
                });

                //按钮事件
                util.event('lay-demo', {
                    getChecked: function (othis) {
                        var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

                        // // layer.alert(JSON.stringify(checkedData), {shade: 0});
                        var checkedData2=JSON.stringify(checkedData);
                        // console.log(checkedData2);
                        var username = $("#username").val();
                        var password = $("#password").val();



                        var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
                        var loginUsername = $('#registerUsername').val();
                        var loginPassword = $('#registerPassword').val();
                        if ($.trim(username) == '' || $.trim(username).length<=0){
                            alert("用户名不能为空")

                        }
                        else if ($.trim(password) == '' || $.trim(password).length<=0){
                            alert("密码不能为空");

                        }

                        else if (!pwdRegex.test(password)) {
                            alert("您的密码复杂度太低（密码中必须包含字母、数字 至少8位），请及时修改密码！");

                        }
                        else {

                            $.ajax({
                                url: '/support/userlistadd',
                                type: "POST",
                                traditional: true,
                                data: {
                                    "username": username,
                                    "password": password,
                                    "checkedData": checkedData2
                                },
                                success: function (res) {
                                    console.log('添加成功')
                                    ptable()
                                    layer.msg('添加成功');
                                    layer.closeAll();
                                }
                            });
                        }
                    }


                });


            });



    //表单
    layui.use(["table", "form"], function () {
        var table = layui.table;
        var form = layui.form;
        ptable= function () {
            table.render({
                elem: '#test'
                , url: '/support/userlistdata'
                , toolbar: '#toolbarDemo'
                , title: '用户数据表'
                , limit: 10
                , page: true
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        , {
                        field: 'id',
                        title: 'ID',
                        width: 80,
                        fixed: 'left',
                        unresize: true,
                        sort: true,
                        totalRowText: '合计'
                    }
                        , {field: 'username', title: '用户名', width: 80}
                        , {field: 'password', title: '密码', width: 200}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
                    ]
                ]

            });
        }
        ptable();
        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {

                case 'add2':

                    layer.open({
                        type: 1,
                        area: ['470px','480px'],
                        title: '项目内容'
                        , content: $("#adminproject"),
                        shade: 0,
                        offset: "10px",

                    });


                    break;
            };
        });
        //监听工具条
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    var id = data.id;
                    $.ajax({
                        url: '/support/userlistdelete',
                        type: "POST",
                        data: {"id": id},
                        success: function () {
                            ptable();
                        }
                    });
                    layer.close(index);
                });
            }

            else if (obj.event === 'edit') {
                console.log(data)
                layer.open({
                    type: 1,
                    area: ['500px', '400px'],
                    title: '项目名'
                    , content: $("#adminproject2"),
                    shade: 0,
                    btn: ['确定', '取消']
                    , success: function (layero, index) {
                        var div = layero.contents().find('#adminproject2');

                        div.find("#id").val(data.id);
                        div.find("#username2").val(data.username);
                        div.find("#password2").val(data.password);
                        form.render();

                    }
                    , btn1: function (index, layero) {
                        var username = $("#username2").val();
                        var password= $("#password2").val();
                        var id = $("#id").val();

                        var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
                        var loginUsername = $('#registerUsername').val();
                        var loginPassword = $('#registerPassword').val();
                        if ($.trim(username) == '' || $.trim(username).length<=0){
                            alert("用户名不能为空")

                        }
                        else if ($.trim(password) == '' || $.trim(password).length<=0){
                            alert("密码不能为空");

                        }

                        else if (!pwdRegex.test(password)) {
                            alert("您的密码复杂度太低（密码中必须包含字母、数字 至少8位），请及时修改密码！");

                        }
                        else {
                            $.ajax({
                                url: '/support/userlistupdate',
                                type: "POST",
                                traditional: true,
                                data: {
                                    "username": username,
                                    "password": password,
                                    "id": id,
                                },

                                success: function () {

                                    ptable();
                                    layer.msg('更改成功');
                                    layer.closeAll();
                                }
                            });
                        }


                    },
                    btn2: function (index, layero) {
                        layer.closeAll();
                    },
                    cancel: function (layero, index) {
                        layer.closeAll();
                    }

                });
            }
        });
        layui.use(['tree', 'util'], function () {
            var tree = layui.tree
                , layer = layui.layer
                , util = layui.util
                //模拟数据


            //基本演示
            // tree.render({
            //     elem: '#test12'
            //     , data: data
            //     , showCheckbox: true  //是否显示复选框
            //     , id: 'demoId1'
            //     , isJump: true //是否允许点击节点时弹出新窗口跳转
            //     , click: function (obj) {
            //         var data = obj.data;  //获取当前点击的节点数据
            //         // layer.msg(JSON.stringify(data))
            //     }
            // });

            //按钮事件



        });


    });


</script>
</body>
</html>